<article>
  <header class="result-header">
    <div class="result-info">
      {{d-button action=(action "downloadResultJson") icon="download" label="explorer.download_json" group=group}}
      {{d-button action=(action "downloadResultCsv") icon="download" label="explorer.download_csv" group=group}}
      {{#if canShowChart}}
        {{#if showChart}}
          {{d-button action=(action "showTable") icon="table" label="explorer.show_table" group=group}}
        {{else}}
          {{d-button action=(action "showChart") icon="chart-bar" label="explorer.show_graph" group=group}}
        {{/if}}
      {{/if}}
    </div>

    <div class="result-about">
      {{resultCount}}
      {{duration}}
    </div>

    <br>

    {{~#if hasExplain}}
      <pre class="result-explain"><code>
        {{~content.explain}}
      </code></pre>
    {{~/if}}

    <br>
  </header>

  <section>
    {{#if showChart}}
      {{data-explorer-bar-chart
        labels=chartLabels
        values=chartValues
        datasetName=chartDatasetName}}
    {{else}}
      <table>
        <thead>
          <tr class="headers">
            {{#each columnDispNames as |col|}}
              <th>{{col}}</th>
            {{/each}}
          </tr>
        </thead>
        <tbody>
          {{#each rows as |row|}}
            {{query-row-content
              row=row
              fallbackTemplate=fallbackTemplate
              columnTemplates=columnTemplates}}
          {{/each}}
        </tbody>
      </table>
    {{/if}}
  </section>
</article>